<template>
  <div class="manage-table">
    <slot name="search"></slot>
    <div class="table-box">
      <vxe-table
        align="center"
        size="medium"
        highlight-hover-row
        resizable
        border
        stripe
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        height="100%"
        class="table-con">
        <vxe-column type="seq" width="60" fixed="left" title="序号"></vxe-column>
        <vxe-column field="userName" title="姓名" min-width="100" fixed="left"></vxe-column>
        <vxe-column field="orgName" title="部门" min-width="150"></vxe-column>
        <vxe-column field="leaderAssessScore" title="部门（分管）负责人评分" min-width="160" sortable>
          <template #default="{ row }">
            <div class="detail_box">
              <span v-if="row.status !== '2'">{{ row.leaderAssessScore }}分</span>
              <span v-else>-</span>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="mainLeaderAssessScore" title="分管（单位主要）负责人评分" min-width="180" sortable>
          <template #default="{ row }">
            <div class="detail_box">
              <span v-if="row.status !== '2'">{{ row.mainLeaderAssessScore }}分</span>
              <span v-else>-</span>
            </div>
          </template>
        </vxe-column>
        <vxe-column
          field="peopleAssessScore"
          title="民主测评分"
          min-width="120"
          sortable
          key="peopleAssessScore"
          v-if="needPeopleAssess">
          <template #default="{ row }">
            <span v-if="row.status !== '2'">{{ row.peopleAssessScore }}分</span>
            <span v-else>-</span>
          </template>
        </vxe-column>
        <vxe-column
          field="calcScore"
          title="加分与扣分"
          min-width="110"
          sortable
          key="calcScore"
          v-if="needPlusMinusPoints">
          <template #default="{ row }">
            <div class="detail_box">
              <span>{{ row.calcScore }}分</span>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="totalScore" title="考核得分" min-width="110" sortable>
          <template #default="{ row }">
            <span v-if="row.status !== '2'">{{ row.totalScore }}分</span>
            <span v-else>-</span>
          </template>
        </vxe-column>
        <vxe-column min-width="120" title="考核等次结果" fixed="right">
          <template #default="{ row }">
            <div class="good_con_img" v-if="row.needAssessRank == 1">
              {{ (row.orgAssessRank || row.assessRank) | AssessRank }}
            </div>
            <div v-else>-</div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <slot name="pagination"></slot>
  </div>
</template>

<script>
export default {
  name: 'ManageTable',
  emits: ['del-account', 'edit-account', 'import-account', 'update-account'],
  components: {},
  props: {
    source: {
      type: Array,
      default: () => [],
    },
    needPeopleAssess: {
      type: Boolean,
      default: false,
    },
    needPlusMinusPoints: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '好'
        case '5':
          return '建议为好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        case '6':
          return '不定等次'
        default:
          return '-'
      }
    },
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
  },
}
</script>
<style lang="scss" scoped>
.manage-table {
  // height: calc(100% - 20px);
  height: calc(100%);
  display: flex;
  flex-direction: column;
  .search-box {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4eaf0;
    padding-bottom: 10px;
    .search-left {
      display: flex;
      align-items: center;
      .search-item {
        max-width: 240px;
      }
      .search-item + .search-item {
        margin-left: 20px;
      }
      .search-inp {
        width: 240px;
      }
      .el-icon-search {
        cursor: pointer;
      }
    }
    .search-right {
      display: flex;
      align-items: center;
      .search-item + .search-item {
        margin-left: 20px;
      }
      .info_box {
        color: #d9001b;
      }
      .info {
        display: flex;
        align-items: center;
        .info_list {
          margin-left: 20px;
        }
      }
    }
  }
  .table-box {
    flex: 1;
    position: relative;

    .table-con {
      ::v-deep .headerStyle {
        background-color: #f0f4f9;

        .vxe-cell {
          color: #333333;
          font-size: 14px;

          span {
            font-weight: 600;
          }
        }
      }

      ::v-deep .rowClass {
        .vxe-cell {
          color: #666666;
          font-size: 14px;

          p,
          div,
          span {
            font-size: 14px;
          }
        }
      }
      .good_con {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
      }
      .good_con_img {
        border: 1px solid #e6e6e6;
        border-radius: 20px;
        width: 85px;
        min-width: 85px;
        color: #fff;
        background-color: #e0c699;
        border-color: #e0c699;
        margin: auto;
      }
      .back_good {
        display: inline-block;
        cursor: pointer;
        margin: 0 8px;
        border: 1px solid #e6e6e6;
        border-radius: 20px;
        width: 50px;
        min-width: 50px;
      }
      .active {
        color: #fff;
        background-color: #e0c699;
        border-color: #e0c699;
      }
      .detail_box {
        // position: relative;
        .word_tip {
          position: absolute;
          right: 1px;
          bottom: 10px;
          .callout {
            width: 0;
            height: 0;
            border-bottom: 10px solid red;
            border-left: 10px solid transparent;
          }
        }
      }
    }
  }
  .bg-pagination {
    margin-top: 10px;
  }
}
</style>
